<template>
  <div class="layout-box">
    <slot name="header"></slot>
    <slot name="nav"></slot>
    <div class="s-wrapper" ref="wrapper">
      <div class="s-content">
        <slot></slot>
      </div>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  props: {
    data: {
      type: [Array, Object]
    },
    gsdata: {
      type: Array
    }
  },
  watch: {
    data() {
      this.refresh();
    },
    gsdata() {
      this.refresh();
    }
  },
  methods: {
    refresh() {
      this.scroll && this.scroll.refresh();
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true
    });
  }
};
</script>

<style lang="scss">
.layout-box {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .s-wrapper {
    height: 100%;
    overflow: hidden;
    flex: 1;
    // .h-content {
    //   height: 300px;
    // }
  }
}
</style>
